<template>
  <div class="steps-list">
    <div
      :class="{ 'steps-item': true, 'item-active': global.activeIndex >= index + 1, 'line-active': global.activeIndex > index + 1 }"
      v-for="(item, index) in stepsData" :key="index" @click="itemClick(index)">
      <div class="num">{{ index + 1 }}</div>
      <div class="label">{{ item.label }}</div>
      <div class="line" v-if="index < 3"></div>
    </div>
  </div>
</template>
<script setup>
import globalStore from '@/stores/modules/global';
const global = globalStore()
const stepsData = ref([
  { label: '资料扫描' },
  { label: 'OCR识别' },
  { label: '患者匹配' },
  { label: '审方完成' },
])
const itemClick = (index) => {
  // global.activeIndex = index + 1
}
</script>
<style scoped lang="scss">
.steps-list {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  margin: 40px 0;

  .steps-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    .num {
      border-radius: 50%;
      height: 30px;
      width: 30px;
      margin-bottom: 16px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #333;
      font-weight: 600;
      background: #fff;
      position: relative;
      z-index: 2;
      cursor: pointer;
    }

    .label {
      font-weight: 600;
      font-display: 16px;
      cursor: pointer;
    }

    .line {
      left: 50%;
      right: -50%;
      position: absolute;
      height: 2px;
      top: 13px;
      background: #333;
    }
  }

  .item-active {
    .num {
      border: 2px solid #409eff;
      color: #409eff;
    }

    .label {
      color: #409eff;
    }
  }

  .line-active {
    .line {
      background: #409eff;
    }
  }
}
</style>